<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>阅读协议</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        /*文本透明*/
        /*text-decoration: none;*/
        font-family: "华文楷体";
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
        align-items: center;
    }

    p {
        font-size: 40px;
        margin: 20px 0 0 0;
        font-weight: bold;
    }

    span {
        /*display: block;*/
        line-height: 50px;
    }

    #content {
        width: 300px;
        height: 400px;
        background-color: #b3b1af;
        overflow: auto;
        margin: 0 auto;
    }

    span > input {
        width: 30px;
        height: 30px;
    }

    input {
        width: 100px;
        height: 40px;
        color: deeppink;
        font-size: 16px;
    }

    span {
        display: flex;
        align-items: center;
        margin: 0 auto;
    }

</style>
<body>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur atque blanditiis commodi cumque dolorem
    doloribus dolorum ea eos expedita facere fuga fugit hic in ipsa itaque iure iusto labore laudantium minima nesciunt
    nihil nobis odit officia optio perspiciatis quas, quidem quis rerum soluta tempora tenetur totam voluptatum? Saepe,
    ullam?
</div>
<span><input id="check" type="checkbox" disabled="disabled">请认真阅读协议</span>
<input id="submit" type="button" value="提交" disabled="disabled">
</body>
<script>
    let submit = document.getElementById("submit")
    let content = document.getElementById("content")
    let check = document.getElementById("check")
    // 元素.onscroll - 当滚动条滚动时触发
    content.onscroll = function () {
        // 判断 content的总高度-content滚动条离content顶部的间距===content视窗的高度(能够看见的高度)
        if (content.scrollHeight - content.scrollTop === content.clientHeight) {
            // 解除禁用
            check.disabled = false
            // 判断check是否选择
            check.onclick = function () {
                if (check.checked) {
                    submit.disabled = !submit.disabled
                    submit.onclick = function () {
                        alert("提交成功!!!!!")
                    }
                }
            }
        } else {
            check.checked = false
            check.disabled = true
            submit.disabled = true
        }
    }
</script>
</html>